<template>
  <div class="right-batch">
    <div class="batch-search">
      <div class="search-form">
        类型
        <el-select 
          v-model="dataFilter.type" 
          style="margin: 0 16px 0 5px; width: 80px;"
        >
          <el-option label="电" :value="1" />
          <el-option label="水" :value="2" />
          <el-option label="气" :value="3" />
        </el-select>
        补抄日期
        <el-date-picker
          v-model="dataFilter.paramTime"
          type="date"
          value-format="YYYY-MM-DD"
          :disabledDate="disabledDateOptions"
          style="margin: 0 16px 0 5px; width: 150px"
        />
        <el-icon :size="12" color="#F29423">
          <Warning />
        </el-icon> 只可选择60天内的日期，不包含当前日期
      </div>
      <div class="search-btn">
        <el-button
          type="primary"
          :loading="batchesloading"
          @click="onCopy"
        >
          补抄
        </el-button>
      </div>
    </div>
    <div class="batch-table">
      <h5>补抄记录</h5>
      <el-table 
        :data="tableData.list" 
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column prop="commitTime" label="提交时间" width="220" />
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="houseNumArr" label="房间号" />
        <el-table-column prop="patchDate" label="补抄日期" width="120" />
        <el-table-column label="补抄状态" align="center" width="180">
          <template #default="{ row }">
            <span :class="'status' + (row.patchStatus == '进行中' ? '1' : row.patchStatus == '成功' ? '2' : '3')">{{row.patchStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="{ row }">
            <el-button 
              v-if="row.patchStatus == '失败'" type="primary" 
              @click="onCopyDouble(row)"
              :loading="batchloading"
            >
              再次补抄
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :pageProps="pageProps"
        layout="prev, pager, next"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getBatchList, dataBatch, batchDouble } from '@/api/settle';
import { ElMessage } from 'element-plus'
import Pagination from "@/components/Pagination/Index.vue";

const dataFilter = reactive({
  // 类型，1-电，2-水，3-气
  type: 1,
  // 指定日期，例：2024-09-24，只可选择60天内的日期
  paramTime: '',
})

const disabledDateOptions =  (date: any) => {
  // 最近天数模式 例如state.timedays = 3, 那就是从今天起3天前的可以选，其他日期不能选
  return date.getTime() > (Date.now() - 24 * 60 * 60 * 1000) || date.getTime() < Date.now() - 24 * 60 * 60 * 1000 * 61
}

const houseProps = reactive({
  projectId: null,
  houseIdList: []
})

const loading = ref(false)

const onSearch = () => {
  getList()
}

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const getList = () => {
  loading.value = true
  getBatchList({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...houseProps,
  })
    .then((res) => {
      loading.value = false
      tableData.list = res.data.records;
      pageProps.value.total = res.data.total;
    })
    .catch((err: any) => {
      loading.value = true
      console.error("err", err.msg);
    });
};

const tableData = reactive({
  list: [] as any
})

const batchesloading = ref(false)

const onCopy = () => {
  batchesloading.value = true
  const params = {
    ...dataFilter,
    ...houseProps,
  }
  dataBatch(params)
  .then((res: any) => {
    batchesloading.value = false
    ElMessage.success('补抄成功！')
    onSearch()
  })
  .catch((err: any) => {
    batchesloading.value = false
    console.error('err', err)
    ElMessage.error(err.msg);
  })
}

const batchloading = ref(false)

const onCopyDouble = (row: any) => {
  batchloading.value = true
  batchDouble(row.id)
  .then((res: any)=> {
    batchloading.value = false
    ElMessage.success('再次补抄成功！')
    onSearch()
  })
  .catch((err: any) => {
    batchloading.value = false
    console.error('err', err)
    ElMessage.error(err.msg);
  })
}

defineExpose({ onSearch, houseProps })
</script>

<style lang="scss" scoped>
.right-batch {
  .batch-search {
    height: 88px;
    background: #F5F7FA;
    padding: 24px;
    .search-form {
      float: left;
    }
    .search-btn {
      float: right;
      .el-button {
        width: 75px;
      }
    }
  }
  .batch-table {
    .status1 {
      color: #5BCC5F;
    }
    .status2 {
      color: #333;
    }
    .status3 {
      color: #F56C6C;
    }
  }
}
</style>